<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝网 - 淘！我喜欢</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .layui-tab-item{height: 900px;}
    </style>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
        //JavaScript代码区域

        layui.use(['element','layer','form'], function(){
            var element = layui.element;
        });
        
        //打开一个列表
        function toAddTab(jsp,id) {
            //添加一个选项卡
            var element = layui.element;
            var count = $("li[lay-id="+id+"]").length;//获取lay-id=a的li标签的个数
            //console.log(count);
            //如果没有这个tab则创建这个tab
            if(count==0){
                element.tabAdd('myTab', {
                    title: id
                    ,content: '<iframe src="'+jsp+'" id="'+id+'" height="100%" width="100%"></iframe>' //支持传入html
                    ,id: id
                });
            }
            element.tabChange('myTab', id);
        }

    </script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">淘宝网</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        贤心
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:void(0)">退了</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item">
                        <a class="" href="javascript:void(0);">商品管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:void(0);" onclick="toAddTab('product.jsp','商品列表')">商品展示</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:void(0);">购物车管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:void(0);" onclick="toAddTab('cart.jsp','购物车列表')">购物车展示</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:void(0);">订单管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:void(0);" onclick="toAddTab('http://localhost:8802/taobao-order/order.jsp','订单列表')">订单展示</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <div class="layui-tab layui-tab-brief layui-tab-card" lay-filter="myTab" lay-allowClose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="main">欢迎页</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">欢迎使用淘宝......</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>
</body>
</html>